/**
 * 列表数据为空时的占位组件
 */

import React from 'react';
import PropTypes from 'prop-types';
import { Result } from '@teamix/ui';
import './index.scss';

// FIXME review几种位置的空状态样式
// const classNameObj = {
//   org: 'organization-content-empty',
//   project: 'project-item-empty',
//   card: 'card-item-empty',
// };

export default class ListEmpty extends React.Component {
  static propTypes = {
    title: PropTypes.string,
    content: PropTypes.string,
    description: PropTypes.string,
    btns: PropTypes.arrayOf(PropTypes.element),
    size: PropTypes.string,
    imgType: PropTypes.string,
    type: PropTypes.string,
    fullPage: PropTypes.bool,
  };

  static defaultProps = {
    content: '',
    description: '',
    btns: null,
    size: 'medium',
    imgType: '',
    type: '', // 默认没有 可选值: org/project/card
    fullPage: false,
  };

  render() {
    const {
      type,
      title,
      content,
      description,
      desc,
      btns,
      extra,
      size,
      imgType,
      theme,
      className,
      ...others
    } = this.props;
    let image;
    switch (imgType) {
      // 企业
      case 'none':
        image = 'none';
        break;
      case 'comment':
        // 暂无评论
        image =
          'https://img.alicdn.com/imgextra/i4/O1CN01Vi0hXP23IJ3NH3poZ_!!6000000007232-2-tps-560-560.png';
        break;
      case 'search':
        // 搜索无结果
        image = 'https://img.alicdn.com/tfs/TB1X8fHzaL7gK0jSZFBXXXZZpXa-600-600.png';
        break;
      case 'fail':
        image =
          'https://img.alicdn.com/imgextra/i4/O1CN01JLSuwN1xFf4JrdEtr_!!6000000006414-2-tps-560-560.png';
        break;
      case 'tb-data':
        // 在tb中列表为空的展位图
        image = 'https://img.alicdn.com/tfs/TB1unn8orj1gK0jSZFuXXcrHpXa-144-144.png';
        break;
      case '500':
        image = 'none';
        break;
      case 'yundou-line':
        image =
          'https://img.alicdn.com/imgextra/i2/O1CN01a1mae31iqYjzVf4iV_!!6000000004464-2-tps-560-560.png';
        break;
      default:
        image = this.props.image || '';
    }
    return (
      <Result
        title={title || content}
        desc={description || desc}
        className={`result-list-empty-style ${className}`}
        img={image || '404'}
        theme={theme || 'yunxiao'}
        size={size}
        extra={extra || btns || null}
        {...others}
      />
    );
  }
}
